<template>
  <Layout class="main" style="height:100%">
    <Sider v-model="shrink" :collapsed-width="80" :style="{overflow: 'auto'}" :width="256" class="left-sider"
           collapsible
           hide-trigger>
      <shrinkable-menu
          :before-push="beforePush"
          :menu-list="menuList"
          :open-names="openedSubmenuArr"
          :shrink="shrink"
          :theme="menuTheme"
          @on-change="handleSubmenuChange"
      >
        <div slot="top" class="logo-con">
          <a href>
            <template v-if="shrink">

              <img alt="" src="../assets/logo-min.png" style="width:44px;">
            </template>
            <template v-else>
              <img alt="" src="../assets/logo-max.png" style="width:200px;">
            </template>
          </a>
        </div>
      </shrinkable-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <div class="header-bar">
          <a :class="['sider-trigger-a', shrink ? 'collapsed' : '']" type="text" @click="toggleClick">
            <Icon :size="26" type="md-menu"/>
          </a>
          <breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav>
          <div class="custom-content-con">
            <profile :emailAddress="emailAddress" :trueName="trueName" :userAvatar="userAvatar"
                     :userName="userName"></profile>
            <div>
              <Divider type="vertical"></Divider>
            </div>
            <notice></notice>
            <fullscreen v-model="isFullscreen" @on-change="fullscreenChange"></fullscreen>

          </div>
        </div>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <div class="tag-nav-wrapper">
            <tag-nav :pageTagsList="pageTagsList"></tag-nav>
          </div>
          <Content class="content-wrapper">
            <keep-alive :include="cachePage">
              <router-view/>
            </keep-alive>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator';
import AppBase from '@/lib/abpbase';
import ShrinkableMenu from '@/components/shrinkable-menu/shrinkable-menu.vue';
import BreadcrumbNav from '@/components/navigation/breadcrumb-nav.vue';
import TagNav from '@/components/navigation/tag-nav.vue';
import Util from '@/lib/util';
import Profile from '@/components/user/profile.vue';
import Fullscreen from '@/components/fullscreen/fullscreen.vue';
import Notice from '@/components/notice/notice.vue';

@Component({
  components: {
    Fullscreen,
    Profile,
    TagNav,
    ShrinkableMenu,
    BreadcrumbNav,
    Notice,
  },
})
export default class Main extends AppBase {
  name: string = 'Main';

  shrink: boolean = false;
  isFullscreen: boolean = false;
  messageCount: string = '0';

  get userName() {
    return this.$store.state.session.user
        ? this.$store.state.session.user.userName
        : '';
  }

  get trueName() {
    return this.$store.state.session.user ? this.$store.state.session.user.name : '';
  }

  get emailAddress() {
    return this.$store.state.session.user ? this.$store.state.session.user.emailAddress : '';
  }

  get userAvatar() {
    if (this.$store.state.app.userAvatar === '') {
      return './images/defaultProfilePicture.png';
    } else {
      return 'data:image/png;base64,' + this.$store.state.app.userAvatar;
    }
  }

  get mesCount() {
    return this.$store.state.app.messageCount;
  }

  get openedSubmenuArr() {
    return this.$store.state.app.openedSubmenuArr;
  }

  get menuList() {
    return this.$store.state.app.menuList;
  }

  get pageTagsList() {
    return this.$store.state.app.pageOpenedList as any[];
  }

  get currentPath() {
    return this.$store.state.app.currentPath;
  }

  get cachePage() {
    return this.$store.state.app.cachePage;
  }

  get menuTheme() {
    return this.$store.state.app.menuTheme;
  }

  init() {
    let pathArr = Util.setCurrentPath(this, this.$route.name as string);

    this.$store.commit('app/updateMenuList');
    if (pathArr.length >= 2) {
      this.$store.commit('app/addOpenSubmenu', pathArr[1].name);
    }
    this.checkTag(this.$route.name);
  }

  toggleClick() {
    this.shrink = !this.shrink;
  }

  checkTag(name?: string) {
    let openPageHasTag = this.pageTagsList.some(item => {

      return item.name === name;
    });
    if (!openPageHasTag) {
      Util.openNewPage(
          this,
          name as string,
          this.$route.params || {},
          this.$route.query || {},
      );
    }
  }

  handleSubmenuChange(val: string) {

  }

  beforePush(name: string) {
    return name !== 'accesstest_index';
  }

  fullscreenChange(isFullScreen: boolean) {

  }

  @Watch('$route')
  routeChange(to: any) {
    this.$store.commit('app/setCurrentPageName', to.name);
    let pathArr = Util.setCurrentPath(this, to.name);
    if (pathArr.length > 2) {
      this.$store.commit('app/addOpenSubmenu', pathArr[1].name);
    }
    this.checkTag(to.name);
    localStorage.currentPageName = to.name;
  }

  mounted() {
    this.init();
  }

  async created() {
    this.$store.commit('app/setOpenedList');

  }

  async beforeCreate() {
    await this.$store.dispatch({
      type: 'app/getProfilePicture',
    });
    this.$store.dispatch({
          type:'notification/getUserNotifications',
          data:{
              maxResultCount:10,
              skipCount:0,
          },
      });
  }
}
</script>
<style lang="less" scoped>
.main {
  .logo-con {
    height: 64px;
    padding: 10px;
    background-color: #191a23;
    border-bottom: 1px solid #000000;

    img {
      height: 44px;
      width: auto;
      display: block;
      margin: 0 auto;
    }
  }

  .header-con {
    background: #fff;
    padding: 0 20px;
    width: 100%;
  }

  .main-layout-con {
    height: 100%;
    overflow: hidden;
  }

  .main-content-con {
    height: ~"calc(100% - 60px)";
    overflow: hidden;
  }

  .tag-nav-wrapper {
    padding: 0;
    height: 40px;
    background: #F0F0F0;
  }

  .content-wrapper {
    padding: 18px;
    height: ~"calc(100% - 80px)";
    overflow: auto;
  }

  .left-sider {
    .ivu-layout-sider-children {
      overflow-y: scroll;
      margin-right: -18px;
    }
  }

  .header-bar {
    width: 100%;
    height: 100%;
    position: relative;

    .custom-content-con {
      float: right;
      height: auto;

      line-height: 64px;

      & > * {
        float: right;
      }
    }
  }

  .sider-trigger-a {
    padding: 6px;
    width: 40px;
    height: 40px;
    display: inline-block;
    text-align: center;
    color: #5c6b77;
    margin-top: 12px;

    i {
      transition: transform .2s ease;
      vertical-align: top;
    }

    &.collapsed i {
      transform: rotateZ(90deg);
      transition: transform .2s ease;
    }
  }
}

</style>
